<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			li{list-style: none;}
			#box{
				width: 1000px;
				margin: 50px auto;
			}
			#top{
				width: 100px;
				background: #F8F8F8;
				border: 1px solid #DDDDDD;
				height: 40px;
			}
			#top li{
				position: relative;
				width: 80px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 14px;
				cursor: pointer;
			}
			#top li span.red{
				color: red;
			}
			#top li div.hide{
				position: absolute;
				z-index: 99;
				top: -1px;
				left: 0px;
				width: 100px;
				height: 120px;
				font-size: 14px;
				border: 1px solid #DDDDDD;
				background: #fff;
				display: none;
				
			}
			#content{
				width: 100%;
				margin-top: 10px;
			}
			#content li{
			position: relative;
			float: left;
			margin: 5px 14px;
			width: 200px;
			height: 230px;
			padding: 10px;
			border: 1px solid #EEEEEC;
			}
			#content li img{
				width: 200px;
				height: 200px;
			}
			#content li p{
				font-size: 14px;
			}
			#content li div{
				position: absolute;
				bottom: 0;
				right: 0;
				background: red;
				background: url(images/price.png) no-repeat;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: #fff318;
				font-size: 14px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul id="top">
				<li class="price">
					<span>价格</span>
					<div class="hide">
						<p>从高到低</p>
						<p>从低到高</p>
						<p>随机</p>
					</div>
				</li>
			</ul>
			<ul id="content">
				<li>
					<img src="images/xh_img1.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>800</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img2.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>300</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img3.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>400</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img4.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>500</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img5.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>120</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img6.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>86</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img7.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>780</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img8.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>500</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img9.png" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>590</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img10.png" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>450</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img11.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>530</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img1.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>50</span>
					</div>
				</li>
			</ul>
		</div>
		<script>
			var oPrice = document.getElementsByClassName('price')[0],
				aBtn = oPrice.querySelectorAll('div p'),
				oHide =oPrice.querySelector('.hide'),
				oSpan = oPrice.querySelector('span'),
				oContent = document.getElementById('content'),
				aPSpan = oContent.querySelectorAll('li div span'),
				aLi = oContent.querySelectorAll('li'),
				length = aPSpan.length,
				arr = [];
				
			    for (var i = 0; i <length; i++) {
			    	arr[i] = [];
			    	arr[i][0]=aLi[i].innerHTML;
			    	arr[i][1]=aLi[i].getElementsByTagName('span')[0].innerHTML*1;
			    }
			    //console.log(arr);
			    oPrice.onmouseenter = function(){
			    	oHide.style.display = 'block';
			    }
			    oPrice.onmouseleave = function(){
			    	oHide.style.display = 'none';
			    }
			    
			    for (var i = 0; i < aBtn.length; i++) {
			    	aBtn[i].i = i;
			    	aBtn[i].onclick = function(){
			    		oHide.style.display = 'none';
			    		oSpan.innerHTML = this.innerHTML;
			    		oSpan.className = 'red';
			    		Sort(this.i);
			    	}
			    }
			    function Sort(q){
			    	console.log(q)
			    	arr.sort(function(a,b){
			    	if(q==1){
                    	return a[1]-b[1];
			            }else if(q==0){
			                return b[1]-a[1];
			            }else{
			            	return Math.random()*10-5;
			            }
			    	})
			    	oContent.innerHTML = '';
			    	for (var i = 0; i < length; i++) {
			    		oContent.innerHTML +='<li>'+ arr[i][0] +'</li>'
			    	}
			    }
		</script>
	</body>
</html>
